<style lang="less">
    @import '../../../styles/common.less';
</style>
<template>
    <div>
        <Row :gutter="10" class="margin-top-10">
            <card>
                <p slot="title">
                    <Icon type="ios-list" />
                    表单设计列表
                </p>
                <Row>
                    <Input v-model="formNameQuery" placeholder="请输入表单名称..." style="width: 200px"/>
                    <Input v-model="formCreateUserQuery" placeholder="请输入表单创建人..." style="width: 200px"/>
                    <Button @click="handleRead" type="primary" icon="search">搜索</Button>
                </Row>
                <Row class="margin-top-10 searchable-table-con1">
                    <div>
                        <Table refs="formTemplate" border :columns="columns" :data="records" @on-row-click="handleRowClick" highlight-row></Table>
                    </div>
                </Row>
                <Row class="margin-top-10 searchable-table-con1">
                    <Page :total="totalCount" :page-size="size" show-total @on-change="changePage"></Page>
                </Row>
            </card>
        </Row>
        <Row :gutter="10" class="margin-top-10">
            <formRecord ref="formRecord"></formRecord>
        </Row>
        <Drawer title="表结构" :closable="true" width="50" v-model="show" :mask="false">
            <tableTemplate ></tableTemplate>
        </Drawer>
    </div>
</template>
<script>
    import api  from '../../../libs/api';
    import {eventBus} from "../../../libs/eventBus"
    import preview from "./preview.vue";
    import formRecord from "./form-record.vue";
    import tableTemplate from  "./table_template.vue"
    export default {
        name: 'formTemplate',
        components: {
            preview,
            formRecord,
            tableTemplate
        },
        data() {
            return {
                records:[],  //表单列表
                totalCount:0,//表单列表总页数
                current: 1,//当前页
                size: 10,//页面大小
                totalPage: 0, //总条数
                formNameQuery:"",//表单名称
                formCreateUserQuery:"", //表单创建人
                tableName:"", //表名称
                show:false,
                columns: [
                    {
                        title: '表单名称',
                        key: 'formName'
                    },
                    {
                        title: '数据表映射',
                        key: 'tableName'
                    },
                    {
                        title: '表单创建人',
                        key: 'createUserView'
                    },
                    {
                        title: '状态',
                        key: 'statusView'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 280,
                        align: 'center',
                        render: (h, params) => {
                            let self=this;
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: (event) => {
                                            if(typeof params.row.tableName!="undefined"&&params.row.tableName!=null&&params.row.tableName!=""){
                                                self.show=true;
                                                eventBus.$emit("setTableCompFormTemplateId",params.row.id);
                                            }else{
                                                this.$Modal.confirm({
                                                    loading:true,
                                                    render: (h) => {
                                                        return h('Input', {
                                                            props: {
                                                                value: self.tableName,
                                                                autofocus: true,
                                                                placeholder: '请输入表名称'
                                                            },
                                                            on: {
                                                                input: (val) => {
                                                                    self.tableName = val;
                                                                }
                                                            }
                                                        })
                                                    },
                                                    onOk: function() {
                                                        let modal = this;
                                                        modal.$data.buttonLoading = false;
                                                        //验证表单
                                                        if(this.tableName==""){
                                                            this.$Message.error('表名称不允许为空',3);
                                                            return false;
                                                        }
                                                        //保存表名称且生成表结构
                                                        let data=Object.assign(params.row,{tableName:self.tableName});
                                                        data.tableName=self.tableName;
                                                        this.$post(api.tableTemplates.base+"/"+params.row.id,data).then(response=>{
                                                            if(200==response.code){
                                                                modal.remove();
                                                                self.handleRead();
                                                                self.tableName="";

                                                            }
                                                        });
                                                    }
                                                });
                                            }
                                            event.stopPropagation(); //阻止事件冒泡
                                        }
                                    }
                                }, '生成表'),
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: (event) => {
                                            this.$get(api.formTemplates.base+"/"+params.row.id).then(response=> {
                                                if (200 == response.code) {
                                                    this.$Modal.confirm({
                                                            width:700,
                                                            loading:true,
                                                            render: (h) => {
                                                                return h(preview,{
                                                                    // 组件 props
                                                                    props: {
                                                                        formTemplate: response.obj,
                                                                        model:"formTemplateAdd" //模板查看
                                                                    }
                                                                })
                                                            },
                                                            onOk: () => {
                                                                let modal = this;
                                                                modal.$data.buttonLoading = false;
                                                                eventBus.$emit('addFormRecord',params.row.id);
                                                            },

                                                        },
                                                    );
                                                }
                                            });
                                            event.stopPropagation(); //阻止事件冒泡
                                        }
                                    }
                                }, '模拟添加'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: (event) => {
                                            this.$get(api.formTemplates.base+"/"+params.row.id).then(response=> {
                                                if (200 == response.code) {
                                                    this.$Modal.confirm({
                                                            width:700,
                                                            render: (h) => {
                                                                return h(preview,{
                                                                    // 组件 props
                                                                    props: {
                                                                        formTemplate: response.obj,
                                                                        model:"formTemplateView" //模板查看
                                                                    }
                                                                })
                                                            }
                                                        },
                                                    );
                                                }
                                            })
                                            event.stopPropagation(); //阻止事件冒泡
                                        }
                                    }
                                }, '预览'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '您确定要删除这条数据吗?',
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleDelete(params.row.id);
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        style: {
                                            margin: '0 5px'
                                        },
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        }

                                    }, '删除')
                                ])
                            ]);
                        }
                    }
                ]
            }
        },
        methods:{
            //翻页
            changePage(index){
                this.current = index;
                this.handleRead();
            },
            //读取列表数据
            handleRead(){
                let data = {};
                data.current = this.current;
                data.size = this.size;
                data.formNameQuery=this.formNameQuery;
                data.formCreateUserQuery=this.formCreateUserQuery;
                this.$get(api.formTemplates.base, data).then(response => {
                    this.totalPage = this.util.calTotalPage(response.obj.total, this.size);
                    this.totalCount = response.obj.total;
                    this.records = [];
                    for (let i in response.obj.records) {
                        this.records.push(response.obj.records[i])
                    }
                });
            },
            //删除表单记录
            handleDelete(id){
                this.$delete(api.formTemplates.base+"/"+id).then(response=>{
                    if(200==response.code){
                        this.handleRead();
                    }
                })
            },
            handleRowClick(row,index){
                let self=this;
                let data = {};
                data.current = this.current;
                data.size = this.size;
                self.$get(api.formTemplates.base+"/"+row.id).then(resp=>{
                    if(200==resp.code){
                        let formTemplate = JSON.parse( resp.obj.formTemplate || '[]');
                        self.$get(api.formTemplates.record.base.replace("{templateId}",row.id),data).then(response=>{
                            if(200==response.code){
                                eventBus.$emit("dynamicTable",response.obj,formTemplate);
                            }
                        })
                    }
                })

            }
        },
        mounted(){
            let self=this;
            this.handleRead();
            eventBus.$on("closeModal",function () {
                self.show=false;
            })
        }
    }
</script>